<template>
    <div class="common">
     <div class="sideBar">
        <el-menu
        :default-active="open"
        
        class="sideBar-wrapper"
        @open="handleOpen"
        @close="handleClose"
        @select="selcetMenu"
        background-color="#2F4050"
        text-color="#fff"
        active-text-color="#fff"
       
        >
        <el-menu-item index="首页">
                
                <span slot="title">{{menuName}}</span>
        </el-menu-item>
        
        <el-submenu :index="list.menuName"  v-for="list in menuList.childMenus" :key="list.index">
            <template slot="title">
           
            <span>{{list.menuName}}</span>
            </template>
            <el-menu-item-group v-for="item in list.childMenus" :key="item.index" v-if="item.free == false">
                <el-menu-item :index="'自由市场'+item.menuName" @click="changeMeun(item)">{{item.menuName}}</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group v-for="item in list.childMenus" :key="item.index" v-if="item.free == true">
                <el-menu-item :index="item.menuName" >{{item.menuName}}</el-menu-item>
            </el-menu-item-group>
        </el-submenu>
        <!-- <el-menu-item index="首页">
        <span slot="title">首页</span>
       </el-menu-item>
        <el-submenu index="商城商品管理">
            <template slot="title">
           
            <span>商城商品管理</span>
            </template>
            <el-menu-item-group>
                <el-menu-item index="添加商品">添加商品</el-menu-item>
                <el-menu-item index="商品管理">商品管理</el-menu-item>
            </el-menu-item-group>
    </el-submenu>
        <el-submenu index="商城订单管理">
                <template slot="title">
               
                <span>商城订单管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="订单管理">订单管理</el-menu-item>
                </el-menu-item-group>
        </el-submenu>
        <el-submenu index="自由市场商品管理">
                <template slot="title">
                <span>自由市场商品管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="自由市场添加商品">添加商品</el-menu-item>
                    <el-menu-item index="自由市场商品管理">商品管理</el-menu-item>
                </el-menu-item-group>
        </el-submenu>
        <el-submenu index="库存管理">
                <template slot="title">
                <span>库存管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="入库">入库</el-menu-item>
                    <el-menu-item index="入库明细">入库明细</el-menu-item>
                    <el-menu-item index="仓库管理">仓库管理</el-menu-item>
                </el-menu-item-group>
        </el-submenu>
        <el-submenu index="交易管理">
                <template slot="title">
                
                <span>交易管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="自由市场">自由市场</el-menu-item>
                    <el-menu-item index="持有管理">持有管理</el-menu-item>
                    <el-menu-item index="委托列表">委托列表</el-menu-item>
                    <el-menu-item index="交易明细">交易明细</el-menu-item>
                </el-menu-item-group>
        </el-submenu>
        <el-submenu index="资金管理">
                <template slot="title">
               
                <span>资金管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="账户余额">账户余额</el-menu-item>
                    <el-menu-item index="子账户管理">子账户管理</el-menu-item>
                    <el-menu-item index="子账户余额">子账户余额</el-menu-item>
                    <el-menu-item index="资金明细">资金明细</el-menu-item>
                    <el-menu-item index="银行卡管理">银行卡管理</el-menu-item>
                </el-menu-item-group>
        </el-submenu> -->
        </el-menu>
    </div>
           
        <div class="cont">
                <Breadcrumb></Breadcrumb>
                <div class="cont-wrapper">
                <router-view></router-view>
                </div>
        </div>      
    </div>
</template>

<script>
import Breadcrumb from '../components/breadcrumb'
export default {

    components: {
        Breadcrumb
    },
    data(){
        return{
            open:'首页' ,
            menuList:[],
            menuName:'',
            userid:JSON.parse(localStorage.getItem("userInfo")).userId
        }
    },
    watch:{
        '$route': 'getRouteName'
    },
    mounted () {
       this.initMenu();
       this.getRouteName();
       console.log(this.$route,'route') 
    },
    methods: {
    async initMenu(){
      let { data } = await this.$post({
        api: '/menu/getMenuList',
        data:{
            accountId: this.userid
        }
      });
      if (data.code === 0) {
        //   console.log(data)
          data.data.forEach(element => {
            //   console.log(element)
              element.childMenus.forEach(el => {
                  if(el.menuName == '自由市场商品管理'){
                         el.childMenus.forEach(list =>{
                             list.free = false
                            // console.log(list)
                        })
                        // this.$store.dispatch('getMenuList', el)
                  }else{
                    el.childMenus.forEach(list =>{
                             list.free = true
                            // console.log(list)
                    }) 
                  }
              });
              
              console.log(element,'el')
              this.$store.dispatch('getMenuList', element.childMenus)
          });
        this.menuList = data.data[0];
        this.menuName = data.data[0].menuName;
        // this.open = data.data[0].menuName;
        
      } else {
        this.$message({
          type: 'error',
          message: data.msg
        })
      }
        
    },
    handleOpen(index,indexPath) {
        // this.$router.push({ name: key });
        
        // console.log(index);
        // console.log( indexPath)
    },
    handleClose(key, keyPath) {
        // console.log(key, keyPath);
    },
    selcetMenu(val,indexPath) {
        // console.log(val,'val');
        // console.log(indexPath,'indexPath')
      this.$router.push({ name: val ,query:{menuId:this.menuId}});
      this.open = val;
    },
    getRouteName() {
       
        const path = this.$route.name;
        console.log(this.$route.name)
        this.open = path;
    },
    changeMeun(item){
        this.menuId = item.menuId;
        this.$router.push( {query:{menuId:this.menuId}});
        console.log(item,'item')
        console.log(this.$route,'route222') 
    }
    }
}
</script>
<style lang="scss">
.common {
/* position: absolute; */
  display: flex;
  width: 100%;
  height: 100%;
}
.sideBar {
  flex: 0 0 220px;
  width: 350px;
  height: 100%;
  overflow-x: hidden;
  /* display: block;
  position: absolute;
  width: 240px;
  left: 0;
  top: 0;
  bottom: 0;
  background: #495060; */
  /* overflow-y: auto; */
  &-wrapper {
    width: 240px;
    height: 100%;
    overflow-y: scroll;
  }
  .is-active {
    background-color: #2d8cf0 !important;
  }
  .el-submenu__title i {
    color: #fff;
  }
  .el-menu-item-group__title {
    padding: 0;
  }
}
.cont{
    padding:20px;
    position: absolute;
    left: 240px;
    right: 0;
    top: 0;
    bottom: 0;
    width: auto;
    padding: 15px;
    box-sizing: border-box;
    overflow-y: auto;
}
</style>